<template>
  <div class="leftTree">
    <p class="w-[180px] mr-[10px] mb-[10px]">
      <el-input v-model="name" placeholder="输入部门名称搜索" size="mini" @input="searchDept"></el-input>
      <el-tree
        :props="props"
        lazy
        :load="loadNode"
        :data="data"
        @node-click="handleNodeClick"
        >
      </el-tree>
    </p>
  </div>
</template>
<script>
import { getDept } from '@/api/dept'
import _ from 'lodash'
export default {
  name: '',
  components: {},
  data () {
    return {
      name: '', // 查询部门
      data: [],
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      }
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {},
  methods: {
    // 查询部门
    searchDept: _.debounce(function () {
      // 判断 name 是否为真 如不为真则不调用搜索功能的接口
      getDept(this.name && { name: this.name }).then(res => {
        this.data = res.content
      })
    }, 500),
    // 获取部门数据
    loadNode (node, resolve) {
      // 简洁代码
      getDept({ pid: node.data?.id }).then(res => {
        setTimeout(() => {
          resolve(res.content)
        }, 100)
      })
      // 完整代码
      // if (node.level === 0) {
      //   getDept().then(res => { resolve(res.content) })
      // } else {
      //   getDept({ pid: node.data.id }).then(res => { resolve(res.content) })
      // }
    },
    handleNodeClick () { }
  }
}
</script>
<style lang="scss" scoped>

</style>
